<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/AssetsManagement' }">资产管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">
                设备操作日志
                <div class="f-right">
                    <el-button type="warning" icon="el-icon-document" @click="toLog">导出资产生命周期档案</el-button>
                </div>
            </div>
            <div class="card-body">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="表格查看" name="first">
                        <el-table stripe :data="tableData" style="width: 100%">
                            <el-table-column prop="type" label="操作类型" width="220">
                            </el-table-column>
                            <el-table-column prop="time" label="操作时间" width="200">
                            </el-table-column>
                            <el-table-column prop="people" label="责任人" width="200">
                            </el-table-column>
                            <el-table-column prop="assCode" label="资产编码" width="200">
                            </el-table-column>
                            <el-table-column prop="ip" label="IP" width="200">
                            </el-table-column>
                            <el-table-column prop="mac" label="MAC地址" width="200">
                            </el-table-column>
                            <el-table-column prop="content" label="操作内容">
                            </el-table-column>
                        </el-table>
                        <div class="page-wrap">
                            <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="时间轴查看" name="second">
                    <div class="time-line">
                        <div class="line-item" v-for="item in tableData" :key="item.index">
                            <time>{{ item.time | FormatTime_yydd }}<br/>{{ item.time | FormatTime_hhmm }}</time>
                            <div class="line-con">
                                <h4>资产操作类型: {{ item.type }}</h4>
                                <p><strong>责任人：{{ item.people }}</strong> 进行了"{{ item.content }}"操作,({{ item.assCode }})  。
                                </p>
                                <p>IP: {{ item.ip }} , Mac: {{ item.mac }}</p>
                            </div>
                        </div>
                    </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { SET_TIME_YYMM, SET_TIME_HHMM } from "@/utils/formatTime.js";

export default {
  name: "LifeCycle",
  data() {
    return {
      activeName: "first",
      tableData: [
                        {
          type: "完成",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        },
                {
          type: "申领1",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        },
        {
          type: "申领",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        },
        {
          type: "入网",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        },
        {
          type: "变更",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        },
        {
          type: "变更",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        },
        {
          type: "退网",
          time: "2019/03/23 18:00",
          people: "二喵",
          assCode: "zc-213123",
          ip: "218.23.123.2",
          mac: "00-01-6C-06-A6-29",
          content: "导入了设备"
        }
      ]
    };
  },
  filters: {
    FormatTime_yydd: function(time) {
      if (time == "") {
        return "No Time!";
      } else {
        return SET_TIME_YYMM(time);
      }
    },
    FormatTime_hhmm: function(time) {
      if (time == "") {
        return "No Time!";
      } else {
        return SET_TIME_HHMM(time);
      }
    }
  }
};
</script>
